<template>
  <div>
    <div v-if="!shouldShowPicker" class="placeholder" @click="activatePicker">
      {{ displayValue }}
    </div>
    <div v-else class="custom-clock-picker">
      <div class="time-display">
        <div class="time-input-container">
          <input v-model="formattedHour" class="time-part time-input" type="text" @input="handleInput('hour')" @focus="selectHour" @change="validateHour" @keydown.up.prevent="incrementTime('hour')" @keydown.down.prevent="decrementTime('hour')" ref="hourInput">
          <span class="colon">:</span>
          <input v-model="formattedMinute" class="time-part time-input" type="text" @input="handleInput('minute')" @focus="selectMinute" @change="validateMinute" @keydown.up.prevent="incrementTime('minute')" @keydown.down.prevent="decrementTime('minute')" ref="minuteInput">
        </div>
      </div>
      <div class="arrow-container">
        <span class="arrow-up" @click="handleArrowClick('increment')">△</span>
        <span class="arrow-down" @click="handleArrowClick('decrement')">▽</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TimePicker',
  props: {
    placeholder: {
      type: String,
      default: '请选择时间'
    },
    value: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isActive: false,
      activeField: 'hour',
      formattedHour: '00',
      formattedMinute: '00',
      userModified: false
    }
  },
  computed: {
    displayValue() {
      return this.value || this.placeholder;
    },
    shouldShowPicker() {
      return this.isActive || this.value;
    }
  },
  watch: {
    value(newVal) {
      if (newVal) {
        const [hour, minute] = newVal.split(':');
        this.formattedHour = hour || '00';
        this.formattedMinute = minute || '00';
      } else {
        this.formattedHour = '00';
        this.formattedMinute = '00';
      }
      this.userModified = false; // 重置修改标志
    }
  },
  mounted() {
    if (this.value) {
      const [hour, minute] = this.value.split(':');
      this.formattedHour = hour || '00';
      this.formattedMinute = minute || '00';
    }
  },
  methods: {
    activatePicker() {
      this.isActive = true;
      this.formattedHour = '00';
      this.formattedMinute = '00';
      this.userModified = false;
      // 立即触发更新
      this.emitTime();
      this.$nextTick(() => {
        this.$refs.hourInput.focus();
      });
    },
    selectHour() {
      this.activeField = 'hour';
    },
    selectMinute() {
      this.activeField = 'minute';
    },
    handleInput(type) {
      this.userModified = true;
      this.validateNumberInput(type);
      this.emitTime();
    },
    validateNumberInput(type) {
      if (type === 'hour') {
        this.formattedHour = this.formattedHour.replace(/[^\d]/g, '').slice(0, 2);
        if (this.formattedHour > 23) {
          this.formattedHour = '23';
        }
      } else if (type === 'minute') {
        this.formattedMinute = this.formattedMinute.replace(/[^\d]/g, '').slice(0, 2);
        if (this.formattedMinute > 59) {
          this.formattedMinute = '59';
        }
      }
    },
    validateHour() {
      if (this.formattedHour === '' || isNaN(this.formattedHour)) {
        this.formattedHour = '00';
      } else {
        this.formattedHour = parseInt(this.formattedHour).toString().padStart(2, '0');
      }
      if (this.userModified) {
        this.emitTime();
      }
    },
    validateMinute() {
      if (this.formattedMinute === '' || isNaN(this.formattedMinute)) {
        this.formattedMinute = '00';
      } else {
        this.formattedMinute = parseInt(this.formattedMinute).toString().padStart(2, '0');
      }
      if (this.userModified) {
        this.emitTime();
      }
    },
    handleArrowClick(direction) {
      this.userModified = true;
      if (direction === 'increment') {
        this.incrementTime(this.activeField);
      } else {
        this.decrementTime(this.activeField);
      }
      this.emitTime();
    },
    incrementTime(type) {
      if (type === 'hour') {
        let hour = parseInt(this.formattedHour) + 1;
        if (hour > 23) hour = 0;
        this.formattedHour = hour.toString().padStart(2, '0');
      } else {
        let minute = parseInt(this.formattedMinute) + 1;
        if (minute > 59) minute = 0;
        this.formattedMinute = minute.toString().padStart(2, '0');
      }
    },
    decrementTime(type) {
      if (type === 'hour') {
        let hour = parseInt(this.formattedHour) - 1;
        if (hour < 0) hour = 23;
        this.formattedHour = hour.toString().padStart(2, '0');
      } else {
        let minute = parseInt(this.formattedMinute) - 1;
        if (minute < 0) minute = 59;
        this.formattedMinute = minute.toString().padStart(2, '0');
      }
    },
    emitTime() {
      const time = `${this.formattedHour}:${this.formattedMinute}`;
      this.$emit('input', time);
      this.$emit('change', this.field);
    }
  }
}
</script>
<style scoped>
.custom-clock-picker {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
}
.time-display {
  display: flex;
  align-items: center;
  margin-right: 5px;
  font-size: 16px;
}
.time-part {
  border: none;
  background: transparent;
  width: 20px;
  text-align: center;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
  outline: none;
}
.time-part:focus {
  border-bottom: 1px solid #409EFF;
}
.colon {
  margin: 0 2px;
}
.arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.arrow-up, .arrow-down {
  cursor: pointer;
  font-size: 12px;
  color: #606266;
  user-select: none;
  padding: 2px 5px;
  line-height: 1;
}
.arrow-up:hover, .arrow-down:hover {
  color: #409EFF;
}
.placeholder {
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  color: #c0c4cc;
}
.placeholder:hover {
  border-color: #c0c4cc;
}
</style>
